<template>

  <div  class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1 style="text-align:center;font-size: 20px"><i class="el-icon-s-custom"></i>  登录</h1>
      </div>
      <div>
        <el-form ref="form":model="form" :rules="rules">

          <!--账户输入栏-->
          <el-form-item class="userid" prop="userid">
            <label>用户名</label>
            <el-input type="text" placeholder="请输入用户名" v-model="form.userid"></el-input>
          </el-form-item>

          <!--密码输入栏-->
          <el-form-item class="userpsd" prop="userpsd">
            <label>密码</label>
            <el-input type="password" placeholder="请输入密码" v-model="form.userpsd"></el-input>
          </el-form-item >

          <el-form-item class="button" align="center">
            <!--登录按钮 跳转链接-->
            <el-button type="primary" icon="el-icon-s-custom" @click="login">登录</el-button>
            <!--注册按钮 跳转链接-->
            <el-button icon="el-icon-edit" @click="toRegister">注册</el-button>
            <el-button icon="el-icon-user" @click="toVisitor">游客</el-button>
          </el-form-item>
        </el-form>
        </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "login",

  data(){
    return{
      form:{
        userid:'', //用户名，用v-model绑定监听，将输入的字符串赋值给username变量
        userpsd:''  //同理
      },
      rules:{
        userid: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        userpsd:[
          { required:true,message:'请输入密码',trigger:'blur'},
        ]
      }
    }
  },

  methods:{
    //登录按钮 使用axios发起请求
    login() {
      this.$axios
          .post('/userinfo/login',{
            userid: this.form.userid,
            userpsd: this.form.userpsd
          })
          .then(response => {
            if (response.data.data.status == 'user') {
              this.$router.push("/personal")
              alert("登陆成功")
              let date =response.data.data
              let userid=date.userid;
              localStorage.setItem("userid",userid)
            }
            else{
              this.$router.push("/index")
              alert("登陆成功")
            }
          })
          .catch(function(error){
            console.log(error);
            alert('请输入正确的用户名和密码')
          })
    },

    //前往注册界面
    toRegister(){
      this.$router.push("/register");
    },
    //前往游客页面
    toVisitor(){
      this.$router.push("/homepage");
    }
  }
}
</script>

<!--设置表单位置与格式-->
<!--设置背景图片-->
<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 400px;
  margin: 200px 900px
}
.login{
  background:url("../assets/1.jpg");
  width: 100%;
  height: 100%;
  position:fixed;
  margin-left: -8px;
  margin-top: -8px;
  background-size:100% 100%;
}
</style>
